<template>
  <div class="_wrap">
    <div class="bigTit"><span>工作量排行</span></div>
    <div class="_body">
      <div class="tabs">
        <span v-for="item in tabs" :key="item.value" :class="{cur: curTab === item.value}" @click="tabClick(item.value)">{{item.label}}</span>
      </div>

      <div class="average">
        <img src="~@/assets/imgPersonnel/icon4.svg">
        <div class="label">周均任课数：</div>
        <div class="value"><sCountTo :val="averageNum" :bg="numBg" color="#AEFAFF" :fontSize="36" /></div>
        <div class="unit">节</div>
      </div>

      <div class="_table">
        <table-scroll-pro
          :data="tableData"
          :columns="columns"
          :config= "config"
          :class-option="classOption">
          <template slot="ranking" slot-scope="{scope, row, data}">
            <div v-html="formatIndex(scope.$index+1)"></div>
          </template>
          <template slot="average" slot-scope="{scope, row, data}">
            {{data}}节
          </template>
        </table-scroll-pro>
      </div>

    </div>
  </div>
</template>

<script>
  export default {
    name: 'itemRightBottom',
    components: {},
    data() {
      return {
        curTab: 0,
        tabs: [
          { label: '周均任课前10学校', value: 0 },
          { label: '周均任课后10学校', value: 1 }
        ],
        averageNum: 0,
        tableData:[],
        columns: [
          { label: '排名', slot: 'ranking', width: 68, align: 'center' },
          { label: '学校', prop: 'school', align: 'center', showOverflowTooltip: true },
          { label: '班级数', prop: 'cNum', width: 72, align: 'center' },
          { label: '教师数', prop: 'tNum', width: 72, align: 'center' },
          { label: '周平均课数', slot: 'average', width: 110, align: 'center' }
        ],
        classOption: {
          // autoPlay: false,
          singleHeight: 50, // 单步运动停止的高度(默认值0是无缝不停止的滚动)
          waitTime: 2000, // 单步停止等待时间(默认值1000ms)
        },
        config:{
          rowHeight: 48 + 'px',
          headerHeight: 48 + 'px',
          rowBGC: 'rgba(7,124,220,.16)',
          stripeBGC: 'rgba(7,124,220,.04)'
        },
        numBg: require('@/assets/imgPersonnel/numBg.svg')
      }
    },
    mounted() {
      this.tabClick(0)
    },
    methods: {
      tabClick(val){
        this.curTab = val
        if(val){
          // 后10
          this.averageNum = 195
          this.tableData = [
            { school: '春蕾莲花', cNum: 12, tNum: 34, average: 70 },
            { school: '郭宅小学', cNum: 5, tNum: 15, average: 150 },
            { school: '东江镇中', cNum: 5, tNum: 30, average: 175 },
            { school: '东江中心小学', cNum: 6, tNum: 26, average: 180 },
            { school: '新东小学', cNum: 6, tNum: 17, average: 180 },
            { school: '单良小学', cNum: 6, tNum: 16, average: 180 },
            { school: '湖沧小学', cNum: 8, tNum: 20, average: 240 },
            { school: '马宅镇中', cNum: 7, tNum: 30, average: 245 },
            { school: '三单中小学', cNum: 10, tNum: 33, average: 320 },
            { school: '成家里小学', cNum: 11, tNum: 31, average: 330 }
          ]
        } else {
          // 前10
          this.averageNum = 2112
          this.tableData = [
            { school: '外国语学校', cNum: 65, tNum: 257, average: 2626 },
            { school: '三中集团中山校区', cNum: 69, tNum: 252, average: 2415 },
            { school: '第二实小', cNum: 78, tNum: 201, average: 2340 },
            { school: '东阳中学', cNum: 54, tNum: 281, average: 2334 },
            { school: '东阳二中', cNum: 48, tNum: 220, average: 2304 },
            { school: '花园外国语学校', cNum: 66, tNum: 196, average: 2100 },
            { school: '巍山高中', cNum: 42, tNum: 172, average: 2016 },
            { school: '横店中心小学', cNum: 63, tNum: 165, average: 1890 },
            { school: '江北中心小学', cNum: 53, tNum: 131, average: 1590 },
            { school: '吴宁一中', cNum: 43, tNum: 204, average: 1505 }
          ]
        }




      },
      formatIndex(index){
        let res = ''
        if(index<10){
          if(index<=3){
            if(index===1){
              res = `<font color="#FFBE00">NO.0${index}</font>`
            } else {
              res = `NO.0${index}`
            }
          } else {
            res = `0${index}`
          }
        } else {
          res = index
        }
        return res
      }
    }
  }
</script>

<style scoped lang="scss">
  ._wrap {
    background: rgba(0,16,43,0.32); border: 1px solid; border-image: linear-gradient(to bottom, rgba(8,132,255, .1), rgba(8,132,255,1)) 1;
    overflow: hidden;
    .bigTit {
      height: 42px; font-size: 24px; font-family: PingFangSC; font-weight: bold; letter-spacing: 1.96px;
      background: url('~@/assets/img/boxBg.svg') -1px top no-repeat;
      display: flex; align-items: center;
      span { margin-left: 40px;}
    }
    ._body {
      padding: 15px; height: 580px; overflow: hidden;

      .tabs {
        display: flex; align-items: center; justify-content: space-between;
        span {
          width: calc( 50% - 2px ); color: rgba(255,255,255,.72); cursor: pointer;
          height: 32px; display: flex; align-items: center; justify-content: center;
          background: #0D2246; border: 1px solid rgba(1,66,120,1); transition: all .3s;
          &.cur {
            border: 1px solid rgba(83,226,255,1); border-radius: 4px; color: #ABF1FF;
          }
        }
      }

      .average {
        padding-top: 12px; padding-bottom: 14px;
        display: flex; align-items: center; justify-content: center;
        img { width: 20px; height: 20px; margin-right: 12px;}
        .label  { font-size: 16px; font-family: PingFangSC;}
        .value {
          height: 40px;
        }
        .unit  { font-size: 16px; opacity: .8; font-family: PingFangSC; margin-left: 12px;}
      }

      ._table {
        width: 100%; height: 448px;
      }

    }
  }
</style>
